import { NavBar, Button, Input, Form } from 'react-vant';
import { useNavigate } from 'react-router-dom';

import './Retrieve.scss';


export default function Retrieve() {
    const navigate = useNavigate();

    const [form] = Form.useForm()

    const onFinish = values => {
        console.log(values)
    }
    return (
        <div>
            <div>
                <NavBar
                    title="找回密码"
                    leftText=""
                    onClickLeft={() => navigate(-1)}
                    className='nav-bar-retrieve'
                />
            </div>
            <div className='register-container'>
                <Form
                    form={form}
                    onFinish={onFinish}
                    footer={
                        <div style={{ margin: '16px 16px 0' }}>
                            <Button round nativeType='submit' type='primary' block>
                                完成
                            </Button>
                        </div>
                    }
                >
                    <Form.Item
                        rules={[{ required: true, message: '请填写手机号' }]}
                        name='phone'
                        label='手机号'
                    >
                        <Input placeholder='请输入手机号' />
                    </Form.Item>
                    <Form.Item
                        rules={[{ required: true, message: '请填写验证码' }]}
                        name='code'
                        label='验证码'
                    >
                        <Input placeholder='请填写验证码'
                            className='getCodeInput'
                            suffix={<div className='getCodeBtn' onClick={() => { console.log('获取验证码') }}>获取验证码</div>} />
                    </Form.Item>
                    <Form.Item
                        rules={[{ required: true, message: '请填写密码' }]}
                        name='password'
                        label='设置密码'
                    >
                        <Input placeholder='请输入密码' />
                    </Form.Item>
                    <Form.Item
                        rules={[{ required: true, message: '请填写密码' }]}
                        name='password2'
                        label='确认密码'
                    >
                        <Input placeholder='请输入重复密码' />
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}
